<!--
 * @Description: 折线图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: 闫晨辉 3089205282@qq.com
 * @LastEditTime: 2025-09-26 15:39:00
-->
<template>
    <div>
        <!-- 1.提供图表容器 -->
        <div ref="C222" style="height: 220px;margin-left: 30px;width:450px"></div>
    </div>
</template>

<script>
// 2.引入折线图的构造函数
import { DualAxes } from '@antv/g2plot';
// 引入get请求  @表示src别名
import { get } from '@/utils/request';
//引入moment js
import moment from 'moment';
import { mapState } from 'vuex';

export default {
    data() {
        return {
            title: '实时湿度曲线',
            params: {
                page: 1,
                pageSize: 100,
            },
            //设置数组存放湿度数据
            tempData: [],
            //创建一个图表实例
             dualAxes:null
        }
    },

    methods: {
        //封装加载折线图的图表函数
         loadDualAxes() {
            //创建折线图表实例对象
            this.dualAxes = new  DualAxes(this.$refs.C222, {
                data: [this.tempData, this.tempData],
                xField: 'insert_time',
                yField: ['temperature', 'humidity'],

                geometryOptions: [
                    {
                        geometry: 'line',
                        color: '#5B8FF9',
                    },
                    {
                        geometry: 'line',
                        color: '#5AD8A6',
                    },
                ],
                //配置x轴字段对象
                xAxis: {
                    label: {
                        rotate: -45,
                        style: {
                            fill: "pink",
                            fontSize: 15
                        }
                    }
                },

                interactions: [{ type: 'marker-active' }],
            });
            //渲染折线图表
             this.dualAxes.render();
        },
        //封装方法获取后端接口中实时数据
        async getTimeData() {
            let res = await get('/dashboard/pageQueryTodayData', this.params);
            let temp = [];
            //将后端获取的数据设置给tempData
            res.data.list.forEach((item, index, arr) => {
                // 由于刻度混乱 将第一条数据值设置为60
                arr[0].humidity = 60;
                arr[0].temperature = 15;
                //item表示数组每一项
                item.insert_time = moment(item.insert_time).format("HH:mm");
                // 由于查询数据密度密集 需要将数据处理 每隔10条数据取1条数据
                if (index % 10 == 0) {
                    temp.push(arr[index]);
                }
            }),
                this.tempData = temp;

        }
    },

    //最早获取dom元素的生命周期
    async mounted() {
        await this.getTimeData();
        this.loadDualAxes();
    }
}
</script>

<style lang="less" scoped></style>